<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的props验证</title>
</head>
<body>

<!--有点绕，学完立刻编码加深印象-->

<div id="app">
    <html-a v-bind:child-num="num"
            v-bind:child-age="age"
            v-bind:child-str="str"
            v-bind:child-obj="obj"
            v-bind:child-price="price"></html-a>
</div>


<script src="../js/vue.js"></script>
<script>
    //去掉警告
    Vue.config.productionTip = false;

    //创建一个Vue对象
    //父组件
    const app = new Vue({
        el : '#app',
        data : {
            num : 100,
            age : '100',
            str : 'abc',
            arr : [1, 2, 3, 4, 5],
            obj : {
                name : 'Mr.Lee'
            },
            price : 100
        },
        components : {
            'html-a' : {
                data() {
                    return {
                        message : '子组件'
                    }
                },
                template : `
                      <div>{{childNum}} {{childAge}} {{childStr}} {{childArr}} {{childObj.name}} {{childPrice}}</div>
                `,
                props : {
                    childNum : Number,
                    childAge : [Number, String],
                    childStr : {
                        type : String,
                        default : 'no str'
                    },
                    childArr : {
                        type : Array,
                        default() {
                            return [];
                        }
                        //required : true
                    },
                    childObj : {
                        type : Object,
                        default() {
                            return {
                                name : 'no name'
                            }
                        }
                    },
                    childPrice : {
                        validator(value) {
                            return value > 90;
                        }
                    }
                }
            }
        },

        //计算属性，固定名称
        computed : {

        },

        //方法
        methods : {

        }
    });










</script>
</body>
</html>
